<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('课程详情')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <style>
        .apply-text{
            line-height: 38px;
            font-size: 14px;
            color: #666666;

        }
        .form-header{
            border-bottom: 1px solid #e2e2e2;
            margin-bottom: 30px;
            padding-left: 8px;
        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <form class="form-horizontal" onsubmit="return false;">
        <div class="row form-header">
            <div class="col-sm-10">
                <i class="fa fa-video h4"></i> <span class="h4" th:text=" ${course.courseName}"></span>
            </div>
            <div class=" col-sm-2" th:if="${manager.companyId == 1 || manager.userId == course.userId}">
                <a class="btn btn-danger btn-sm" th:onclick="removeCourse([[${course.courseId}]])"><i class="fa fa-remove"></i> 删除课程</a>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 text-sm-right col-form-label">专业:</label>
            <span class="col-sm-3 col-form-label" th:text="${category.subjectName}"></span>
            <label class="col-sm-2 text-sm-right col-form-label">类别:</label>
            <span class="col-sm-3 col-form-label" th:text="${course.categoryName}"></span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 text-sm-right col-form-label">类型:</label>
            <div class="col-sm-3 col-form-label" th:switch="${course.sellType}">
                <span th:case="'COURSE'">课程</span>
                <span th:case="'LIVE'">直播</span>
                <span th:case="'PACKAGE'">套餐</span>
            </div>
            <label class="col-sm-2 text-sm-right col-form-label">频道:</label>
            <span class="col-sm-3 col-form-label" th:text="${channel.channelName}"></span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 text-sm-right col-form-label">主讲:</label>
            <div class="col-sm-3 col-form-label" >
                <span style="margin-right: 10px" th:each="teacher : ${teacherList}"  th:text="${teacher.name}"></span>
            </div>
            <label class="col-sm-2 text-sm-right col-form-label">课时:</label>
            <span class="col-sm-3 col-form-label" th:text="${course.lessonNum}"></span>
        </div>
        <div class="form-group row" th:if="${course.sellType == 'LIVE'}">
            <label class="col-sm-2 text-sm-right col-form-label">开播时间:</label>
            <span class="col-sm-3 col-form-label" th:text="${#strings.replace(course.liveBeginTime,'T',' ')}"></span>
            <label class="col-sm-2 text-sm-right col-form-label">结束时间:</label>
            <span class="col-sm-3 col-form-label" th:text="${#strings.replace(course.liveBeginTime,'T',' ')}"></span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 text-sm-right col-form-label">售价:</label>
            <div class="col-sm-3 col-form-label">
                <span class="text-red" th:text="${course.price/100} + '元  '"></span>
                <span style="margin-left: 10px;font-size: 14px"><del th:text=" ${course.sourcePrice/100}+元"></del></span>
            </div>
            <label class="col-sm-2 text-sm-right col-form-label">总时长:</label>
            <span class="col-sm-3 col-form-label" th:text="${course.totalDurations/60}+':'+${course.totalDurations%60}"></span>
        </div>

        <div class="form-group row">
            <label class="col-sm-2 text-sm-right col-form-label">销量:</label>
            <span class="col-sm-3 col-form-label" th:text="${course.buyCount}"></span>
            <label class="col-sm-2 text-sm-right col-form-label">浏览:</label>
            <span class="col-sm-3 col-form-label" th:text="${course.viewCount}"></span>
        </div>
        <div class="form-group row" th:if="${manager.companyId == 1 || manager.userId == course.userId}">
            <label class="col-sm-2 text-sm-right col-form-label">状态:</label>
            <span class="col-sm-3 col-form-label" th:text="${course.isAvailable == 1?'上架':'下架'}"></span>
            <label class="col-sm-2 text-sm-right col-form-label">属性:</label>
            <div class="col-sm-2 pt-2">
                <label for="isElite"><input type="checkbox" value="1" name="isElite" id="isElite" th:checked="${course.isElite==1}" onchange="isEliteClicked()"> 推荐</label>
                <label for="isTop"><input type="checkbox" value="1" name="isTop" id="isTop" th:checked="${course.isTop==1}" onchange="isTopClicked()"> 固顶</label>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 text-sm-right col-form-label">创建时间:</label>
            <span class="col-sm-3 col-form-label" th:text="${#strings.replace(course.addTime,'T',' ')}"></span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 text-sm-right col-form-label">简介:</label>
            <span class="col-sm-8 col-form-label" th:text="${course.intro}"></span>
        </div>
        <div class="container-fluid mt-2 mb-2">
            <div class="row">
                <div class="btn-group-sm" id="toolbar" role="group" th:if="${manager.companyId == 1 || manager.userId == course.userId}">
                    <button  class="btn btn-primary btn-xs" th:onclick="$.operate.add([[${course}]],'685px','285px')">
                        <i class="fa fa-upload"></i> 上传文件
                    </button>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table" class="table-striped"></table>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<th:block th:insert="~{include :: summernote-js}" />
<script th:inline="javascript">
    var courseId = [[${course.courseId}]];

    $(function() {
        var content = $("#noticeContent").val();
        $('#editor').html(content);
    });

    $(function() {
        var options = {
            url: "/course/file/list.json?courseId="+ courseId,
            modalName: "相关资料",
            sidePagination: "client",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            createUrl: "/course/file/add.html?courseId="+ courseId,
            removeUrl: "/course/file/remove.json",
            columns: [
                {
                    field : 'id',
                    title : 'id'
                },
                {
                    field : 'title',
                    title : '文件名'
                },
                {
                    field : 'fileSize',
                    title : '文件大小/KB'
                },
                {
                    field : 'userName',
                    title : '上传人'
                },
                {
                    field : 'createTime',
                    title : '上传时间'
                },
                {
                    field : 'sort',
                    title : '排序'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick=$.operate.remove(\'' + row.id + '\')><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });


    //推荐开关操作
    function isTopClicked() {
        var isTop = $("#isTop").prop("checked") ? 1 : 0;
        var msg = "";
        if (isTop > 0) {
            msg = "确认要把课程排序改为置顶吗?"
        } else {
            msg = "确认要把课程排序取消置顶吗?"
        }
        $.modal.confirm(msg, function () {
            var data = {"courseId": courseId, "isTop": isTop};
            $.post("/course/top/clicked.json",data,function (json) {
                if(json.code === 0){
                    location.reload()
                }
            })
        });
    }

    //置顶开关操作
    function isEliteClicked() {
        var isElite = $("#isElite").prop("checked") ? 1 : 0;
        var msg = "";
        if(isElite > 0){
            msg = "确认要把课程排序改为推荐吗?"
        }else {
            msg = "确认要把课程排序取消推荐吗?"
        }
        $.modal.confirm(msg, function () {
            var data = {"courseId": courseId, "isElite": isElite};
            $.post("/course/elite/clicked.json",data,function (json) {
                if(json.code === 0){
                    location.reload()
                }
            })
        });
    }


    //删除课程
    function removeCourse(id) {
        $.modal.confirm("确定删除此课程吗？", function() {
            $.post("/course/remove.json",{"ids":id},function (json) {
                if(json.code===0){
                    window.parent.$.table.search();
                    window.parent.layui.layer.closeAll();
                }else {
                    $.modal.msgError(json.msg);
                }
            });

        });
    }

    //上传相关资料
    $("#course-file-add").click(function () {
        $.operate.add()
        var index = layer.open({
            title: '上传资料',
            content: '/course/file/add.html?courseId=' + courseId,
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['50%', '70%']
        });
    });
</script>
</body>
</html>